<template>
  <div id="login" class="col-12 account-pages mt-5 mb-5 px-1">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xxl-4 col-lg-5">
          <div class="card">
            <!-- Logo -->
            <div class="card-header pt-4 pb-4 text-center bg-primary">
              <a href="/">
                <span>
                  <img src="/public/images/logo.png" alt height="18" />
                </span>
              </a>
            </div>

            <div class="card-body p-4 bg-light">
              <div class="text-center w-75 m-auto">
                <h4 class="text-dark-50 text-center mt-0 fw-bold">
                  登录
                </h4>
              </div>

              <form>
                <div class="form-floating mb-3">
                  <input
                    type="text"
                    class="form-control"
                    id="floatingUsername"
                    placeholder=""
                    v-model.trim="username"
                    required
                  />
                  <label for="floatingUsername">用户名或手机号码</label>
                </div>
                <div class="form-floating">
                  <input
                    type="password"
                    class="form-control"
                    id="floatingPassword"
                    placeholder="Password"
                    v-model.trim="password"
                  />
                  <label for="floatingPassword">密码</label>
                </div>

                <div class="mb-4">
                  <router-link
                    to="/find-password"
                    class="text-danger float-end"
                  >
                    <small>忘记密码？</small>
                  </router-link>
                </div>

                <div class="mb-3">
                  <div class="row">
                    <div class="col-6 form-floating">
                      <input
                        type="text"
                        class="form-control"
                        id="floatingCode"
                        placeholder="code"
                        v-model.trim="vcode"
                      />
                      <label for="floatingCode">验证码</label>
                    </div>
                    <div class="col-6">
                      <img
                        id="kaptchaImage"
                        height="80%"
                        title="点击图片更换验证码"
                        class="w-100"
                      />
                      <small>
                        <a
                          href="javascript:void(0)"
                          @click.stop="refreshKaptcha()"
                          >刷新</a
                        >
                      </small>
                    </div>
                  </div>
                </div>

                <div class="mb-3 text-center">
                  <button
                    id="btnLogin"
                    type="button"
                    class="btn btn-primary"
                    :disabled="logining"
                    @click.stop="login()"
                  >
                    登录
                  </button>
                </div>
              </form>
            </div>
            <!-- end card-body -->
          </div>
          <!-- end card -->

          <div class="row mt-3">
            <div class="col-12 text-center">
              <p class="text-muted">
                没有账户?
                <router-link to="/register" class="text-dark ms-1">
                  <b>注册</b>
                </router-link>
              </p>
              <p class="text-muted d-none">演示用户名 demo 密码 demo</p>
              <p class="text-primary d-none">本站网址: http://tms.90sky.com</p>
              <p class="text-secondary d-none">
                备用网址: http://tms-2.90sky.com
              </p>

            </div>
            <!-- end col -->
          </div>
          <!-- end row -->
        </div>
        <!-- end col -->
      </div>
      <!-- end row -->
    </div>
    <!-- end container -->
  </div>
</template>

<script>
import $ from "jquery";
import { login } from "@/api/user.js";

export default {
  data() {
    return {
      username: "",
      password: "",
      vcode: "",
      errMsg: "",
      errAlert: false,
      justLogout: false,
      logining: false,
    };
  },
  computed: {
    workMode() {
      return this.$store.state.workMode;
    },
  },
  updated: function () {
    if (this.logined === false && this.justLogout) {
      this.justLogout = false;
      this.refreshKaptcha();

      var self = this;
      $("#kaptchaImage").click(self.refreshKaptcha);
    }
  },
  mounted: function () {
    this.$store.commit("readCookies");
    $("#kaptchaImage").click(() => {
      this.refreshKaptcha();
    });
    this.refreshKaptcha();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    login: function () {
      this.logining = true;
      const params = {
        username: this.username,
        password: this.password,
        captchaValue: this.vcode,
      };

      login(
        params,
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            if (
              jsonResult.expireDate !== undefined &&
              jsonResult.expireDate !== null
            ) {
              if (jsonResult.expireDays < 30 && jsonResult.expireDays >= 0) {
                this.showErrMsg(
                  "您的会员有效期到" +
                    jsonResult.expireDate +
                    "截止，请及时续费！",
                  "danger"
                );
              } else if (jsonResult.expireDays < 0) {
                this.showErrMsg("您的会员已过期！");
              }
            }

            const u = {
              username: jsonResult.username,
              avatar: jsonResult.avatar,
              logined: true,
              fullname: jsonResult.fullname,
              token: jsonResult.token,
              enterpriseId: jsonResult.enterpriseId,
              userId: jsonResult.userId,
              sid: jsonResult.sid,
            };
            this.$store.dispatch("setLoginInfo", u);
            this.$router.push("/home");
          } else {
            this.showErrMsg(jsonResult.errmsg, "danger");
            this.refreshKaptcha();
            this.vcode = "";
          }
        },
        () => {
          this.logining = false;
        }
      );
    },
    refreshKaptcha: function () {
      $("#kaptchaImage")
        .attr("src", "/Flight/captcha.do?" + Math.floor(Math.random() * 100))
        .fadeIn();
    },
  },
};
</script>
